<template>
  <div id="container"  @dblclick="backMap"></div>
</template>
<script>
import echarts from "echarts";
import $ from "jquery";
import "echarts/map/js/china.js"; // 引入中国地图数据
export default {
  data() {
    return {};
  },
  mounted() {
    this.MapData();
  },
  methods: {
     backMap(){
       this.$router.go(-1)
     },
    MapData() {
      var myChart = echarts.init(document.getElementById("container"));
      $.get(
        "https://geo.datav.aliyun.com/areas_v2/bound/810000_full.json",
        (result) => {
          // console.log(result);
          echarts.registerMap("香港", result);
          var option = {
            tooltip: {
              show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。 [ default: true ]
              trigger: "item", //触发类型。 [ default: 'item' ]
              showDelay: 0,
              transitionDuration: 0.2,
              formatter: function(params) {
                // alert(params);
                // return params.name;
              },
              // formatter: function(params) {
              //   alert(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
              // },
            },
            title: {
              text: "",
              x: "center",
            },
            geo: {
              map: "香港",
              label: {
                normal: {
                  show: true, //关闭省份名展示
                  fontSize: "14",
                  color: "rgba(0,0,0,0.7)",
                },
              },
              roam: true,
              itemStyle: {},
            },
            series: [
              {
                type: "effectScatter",
                coordinateSystem: "geo",
                rippleEffect: {
                  brushType: "stroke",
                },
                symbolSize: function(val, params) {
                  return 8;
                },
                data: [],
              },
            ],
          };
          myChart.setOption(option);
        }
      );
    },
  },
};
</script>

<style>
#container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
}
</style>
